<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /* 
        html标签的语义化
            语义化标签更具有可读性，便于团队的开发和维护
            没有css的情况下，网页也能很好的呈现出内容结构和代码结构
            关于SEO，搜索引擎更能理解到网页中各部分之间的关系，更准确更快速搜索信息
            
        header标签  <header>  头部
            用来定义文档（网页或者是某一个段落）的页眉（头部）
            可能包含一些标题元素，也可能包含其他元素，比如logo、搜索框、作者信息等等
            
        footer标签 <footer>  页脚
            footer标签代表一个网页或者章节内容的底部区域（页脚）

        nav标签 <nav> 导航
            元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。
            导航部分的常见示例是菜单，目录和索引
        
        section标签 
            section是html中一个独立的区域（主要针对网页分块），没有其他语义，一般会包含一个独立的标题

        article标签
            代表文档、页面、或程序中，可以独立的完整的被外部引用的内容

        aside元素
            被认为是独立于内容的一部分，并且可以拆出来而不会使整体收到影响，通常表现为侧边栏
        
        figure元素
            一般会在figure元素中插入figcaption元素（标题元素），将figcaption代表的标题与figure内容相关联

        mark元素
            为引用的内容进行标记或突出显示文本，用来表示和上下文之间的关联性
            mark标签是行内标签，默认黄色背景颜色

        time元素
            用来表示24小时制 或者是 一个公历时间
            两种用法：
                time标签直接包含时间
                使用datetime属性来表示时间
        
        datalist 元素
            包含了一组option元素，代表是列表可选的值
            和input进行相关联，用来配套使用
            input中的list属性 == datalist的id属性

        progress元素 进度条
            主要用来显示一项任务的完成程度

            */
    </script>
  </body>
</html>
